<template>
	<view class="wrapper site">
		<!-- 搜索栏 -->
		<view class="site-search main-flex">
			<view class="site-search-province">
				<choose-province
					v-model="regionCode"
					@open="openProvince"
					@close="closeProvince"
					@change="changeProvince">
					<template v-slot:suffix>
						<view class="site-search-province-icon" :class="isUp ? 'rotate180' : ''">
							<uni-icons type="down" size="16" color="#333333"></uni-icons>
						</view>
					</template>
				</choose-province>
			</view>
			<view class="site-search-box main-flex-item main-flex">
				<uni-easyinput
					v-model="searchWords"
					focus
					:inputBorder="false"
					:styles="{
						borderColor: '#e3230e'
					}"
					primaryColor="#ccc"
					@confirm="searchFun"
					@clear="clearSearch"
					:placeholder="wordsPlaceholder || '请输入搜索内容'">
					<template #left>
						<uni-icons type="search" size="20" color="#666"></uni-icons>
					</template>
					<template #right>
						<button class="ty-button site-search-box-btn" @click="searchFun">搜索</button>
					</template>
				</uni-easyinput>
			</view>
		</view>
		<!-- 搜索结果 -->
		<view class="site-content">
			<view class="line" style="height: 20rpx;"></view>
			<view class="result">
				<view class="result-title">自提点</view>
				<view class="result-content">
					<view class="site-item main-flex" @click="chooseSite">
						<view class="site-item-left main-flex-item">
							<view class="site-item-name">自提点</view>
							<view class="site-item-addr">大渡口区</view>
						</view>
						<view class="site-item-right">选择</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed, ref, watch } from 'vue';
import { onReady, onLoad, onReachBottom, onShow, onHide } from '@dcloudio/uni-app';
import useUserStore from '@/store/modules/user'
import useSetStore from '@/store/modules/set'
import modal from '@/plugins/modal'

	const userStore = useUserStore()
	const setStore = useSetStore()
	
	const isUp = ref(false)
	const regionCode = ref('500000')
	// 打开选择区域
	const openProvince = () => {
		isUp.value = true
	}
	// 关闭选择区域
	const closeProvince = () => {
		isUp.value = false
	}
	// 选择选择区域
	const changeProvince = (e) => {
		closeProvince()
		if (e) {
			regionCode.value = e.code
		}
		console.log(e)
	}
	
	// 搜索自提点
	const searchWords = ref('')
	const wordsPlaceholder = ref('')
	const isSearch = ref(false)
	const searchFun = () => {
		if (searchWords.value) {
			isSearch.value = true
			searchFirst()
		}
	}
	// 清空搜索
	const clearSearch = () => {
		isSearch.value = false
		searchWords.value = ''
		searchFirst()
	}
	
	// 自提点查询
	const productList = ref([])
	const pageNum = ref(1)
	const pageSize = ref(10)
	const total = ref(0)
	const isLoading = ref(false)
	const status = ref('more')
	const isNull = ref(false)
	
	const searchFirst = () => {
		pageNum.value = 1
		productList.value = []
		status.value = 'loading'
		getList()
	}
	
	const getList = () => {
		const params = {
			pageNum: pageNum.value,
			pageSize: pageSize.value,
			sellChannel: userStore.sellChannel,
			regionCode: userStore.regionCode
		}
		if (searchWords.value) {
			params.productName = searchWords.value
		} else {
			params.recommend = 1
			params.productName = wordsPlaceholder.value || ''
		}
		isLoading.value = true
		// uni.showLoading({
		// 	title: '数据加载中...'
		// })
		// product(params).then(res => {
		// 	productList.value = productList.value.concat(res.data || [])
		// 	status.value = res.data.length === pageSize.value ? 'loading' : 'no-more'
		// 	total.value = res.allNumber
		// 	isNull.value = res.allNumber === 0 && pageNum.value === 1
		// 	isLoading.value = false
		// 	// uni.hideLoading()
		// }).catch(() => {
		// 	isLoading.value = false
		// 	// uni.hideLoading()
		// })
	}
	
	// 选择自提点
	const chooseSite = (item) => {
		userStore.changeSite(item)
		uni.navigateBack({
			delta: 1
		})
	}
	
</script>

<style lang="scss">
	page {
		background-color: $page-bg-color;
	}
	.site {
		background-color: $page-bg-color;
		&-search {
			position: fixed;
			width: 100%;
			left: 0;
			box-sizing: border-box;
			padding: 0 20rpx 12rpx;
			z-index: 10;
			background-color: $page-bg-color;
			&-province {
				&-icon {
					transition: all .3s;
					margin-left: 10rpx;
				}
			}
			&-box {
				height: 64rpx;
				border-radius: 200rpx;
				border: 1px solid $primary-color;
				padding: 4rpx 4rpx 4rpx 20rpx;
				box-sizing: border-box;
				overflow: hidden;
				margin-left: 20rpx;
				:deep(.uni-easyinput) {
					height: 100%;
					.uni-easyinput__content {
						height: 100%;
					}
					.uni-easyinput__content-input {
						height: 100%;
					}
				}
				&-btn {
					height: 100%;
					font-size: 24rpx;
					color: #ffffff;
					padding: 0 30rpx;
					margin: 0;
					background-color: $primary-color;
					border-color: $primary-color;
					justify-content: center;
					border-radius: 28rpx;
				}
			}
		}
		&-content {
			padding: 76rpx 0px 0px;
			.result {
				padding: 0 20rpx;
				&-title {
					font-size: 28rpx;
					padding: 20rpx 0;
				}
			}
		}
		&-item {
			
		}
	}
	
</style>
